import './index.less'

import { Button, Select, Form, Input, Row, Col, DatePicker } from 'antd'
import dayjs from 'dayjs'

const { RangePicker } = DatePicker

/**
 * filterList:[{
 *   label:"", // 标签名
 *   name:"", // 表单字段名
 *   type:"" ,// 表单类型: 'input' | 'select' | 'date'
 *   placeholder:''
 *   size
 *   maxLength
 *   mapKeys: ['startKey', 'endKey'] // 日期类型专用，自定义开始和结束参数名，如 ['verificationStartDate', 'verificationEndDate']
 * }]
 */
const AFilter = (props) => {
  const {
    filterList = [],
    onHandleSearch,
    column = 4,
    buttonSpan = 3,
    buttonText = '查询',
  } = props
  const [form] = Form.useForm()
  const handleSearch = () => {
    const values = form.getFieldsValue()
    // 处理参数，过滤掉 undefined、null 和空值，并处理日期范围
    const filteredParams = Object.entries(values).reduce(
      (acc, [key, value]) => {
        if (value !== undefined && value !== null && value !== '') {
          // 如果是日期范围数组（RangePicker 返回的值）
          if (
            Array.isArray(value) &&
            value.length === 2 &&
            value[0] &&
            value[1] &&
            (value[0].format || dayjs(value[0]).isValid())
          ) {
            // 格式化为 YYYY-MM-DD 格式，转换为 start 和 end 参数
            // 查找对应的 filterList item 配置，看是否有自定义的 mapKeys
            const dateItem = filterList.find(
              (item) => item.name === key && item.type === 'date'
            )
            if (
              dateItem?.mapKeys &&
              Array.isArray(dateItem.mapKeys) &&
              dateItem.mapKeys.length === 2
            ) {
              // 使用自定义的参数名
              acc[dateItem.mapKeys[0]] = dayjs(value[0]).format('YYYY-MM-DD')
              acc[dateItem.mapKeys[1]] = dayjs(value[1]).format('YYYY-MM-DD')
            } else {
              // 默认使用 {name}Start 和 {name}End
              acc[key + 'Start'] = dayjs(value[0]).format('YYYY-MM-DD')
              acc[key + 'End'] = dayjs(value[1]).format('YYYY-MM-DD')
            }
          } else {
            acc[key] = value
          }
        }
        return acc
      },
      {}
    )

    onHandleSearch?.(filteredParams)
  }
  // 计算每个表单项占的宽度
  const span = (24 - buttonSpan) / column
  return (
    <div className="form-filter-container">
      <Form layout="horizontal" form={form}>
        <Row gutter={24}>
          {filterList?.map((item) => {
            const { type = 'input', name, label, rules } = item || {}
            // 日期类型使用更大的宽度（span * 1.5，但不能超过 24）
            const dateSpan =
              type === 'date' ? Math.min(Math.ceil(span * 1.05), 10) : span
            return (
              <Col span={dateSpan} key={name}>
                <Form.Item label={label} name={name} rules={rules}>
                  {type === 'input' && (
                    <Input
                      className="filter-input"
                      placeholder={item?.placeholder || '请输入'}
                      size={item?.size || 'large'}
                      maxLength={item?.maxLength || Infinity}
                    />
                  )}
                  {type === 'select' && (
                    <Select
                      options={item?.options || []}
                      defaultValue={
                        item?.defaultValue || item?.options?.[0]?.value || ''
                      }
                    />
                  )}
                  {type === 'date' && (
                    <RangePicker
                      className="filter-date-picker"
                      placeholder={
                        item?.placeholder || ['开始日期', '结束日期']
                      }
                      format="YYYY-MM-DD"
                      style={{ width: '100%' }}
                      size={item?.size || 'large'}
                    />
                  )}
                </Form.Item>
              </Col>
            )
          })}
          <Col span={buttonSpan}>
            <Button type="primary" variant="solid" onClick={handleSearch}>
              {buttonText}
            </Button>
          </Col>
        </Row>
      </Form>
    </div>
  )
}

export default AFilter
